<template>
  <div>
    <!-- 间距组件 -->
    <el-space>
      <el-input v-model.trim="title" placeholder="请输入优惠券标题" />
      <el-select placeholder="请选择优惠券类型" v-model="type">
        <el-option label="满减券" value="1" />
        <el-option label="全部" value="0" />
      </el-select>
      <el-select placeholder="请选择优惠券状态" v-model="status">
        <el-option label="下架" value="0" />
        <el-option label="正常" value="1" />
        <el-option label="已过期" value="-1" />
        <el-option label="全部" value />
      </el-select>
      <el-button type="primary" class="iconfont icon-sousuo" @click="coupons()"
        >查找</el-button
      >
      <el-button
        type="primary"
        class="iconfont icon-tianjia"
        @click="addCoupons()"
        >添加</el-button
      >
      <el-button type="primary" class="iconfont icon-daochu" @click="derived()"
        >当前页导出</el-button
      >
    </el-space>
    <!-- 表格数据 -->
    <el-table :data="datalist" border style="width: 100%">
      <el-table-column prop="id" label="优惠券ID" align="center" />
      <el-table-column prop="title" label="优惠券名称" align="center" />
      <el-table-column prop="type" label="状态" align="center">
        <template #default="scope">
          {{ scope.row.type == 1 ? "满减券" : "全部" }}
        </template>
      </el-table-column>
      <el-table-column prop="description" label="介绍" align="center" />
      <el-table-column prop="total" label="优惠券数量" align="center" width="60px"/>
      <el-table-column prop="surplus" label="剩余数量" align="center" />
      <el-table-column prop="limit" label="每人限额" align="center" />
      <el-table-column label="满减金额" align="center">
        <template #default="scope">
          <span>减免{{ scope.row.discount / 100 }}元</span>
        </template>
      </el-table-column>
      <el-table-column label="最低消费" align="center">
        <template #default="scope">
          <span>满{{ scope.row.min / 100 }}可用</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template #default="scope">
          <el-tag>
            {{uss(scope.row)}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="使用类目类型" align="center">
        <template #default="scope">
          <el-tag>
            {{ scope.row.categoryTitle ? scope.row.categoryTitle : "全部类目" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="categoryId" label="使用类目ID" align="center" />
      <el-table-column label="领券相对天数" align="center">
        <template #default="scope">
          {{ scope.row.days ? scope.row.days : "无" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="gmtStart"
        label="领券开始时间"
        align="center"
        :formatter="birthdays"
      />
      <el-table-column
        prop="gmtEnd"
        label="领券结束时间"
        align="center"
        :formatter="dateFormat"
      />

      <el-table-column label="操作" width="140px" align="center">
        <template #default="scope">
          <el-button
            :type="scope.row.status ? 'danger' : 'primary'"
            size="small"
            @click="handleEdit(scope.row)"
            >{{ scope.row.status ? "下架" : "正常" }}</el-button
          >
          <el-button type="info" size="small" @click="handleDelete(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 创建对话框 -->
    <el-dialog v-model="dialogVisible" title="创建" width="50%">
      <el-form :model="show" label-width="120px" :rules="addFormRules">
        <el-form-item label="优惠券名称" prop="title">
          <el-input v-model="show.title" />
        </el-form-item>
        <el-form-item label="优惠券类型">
          <el-select placeholder="请选择优惠券类型" v-model="show.type">
            <el-option label="满减券" :value="1" />
            <el-option label="全部" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="介绍" prop="description">
          <el-input v-model="show.description" />
        </el-form-item>
        <el-form-item label="优惠券数量" prop="total">
          <el-input v-model="show.total">
            <template #append>张</template>
          </el-input>
        </el-form-item>
        <el-form-item label="每人限额" prop="limit">
          <el-input v-model="show.limit">
            <template #append>张</template>
          </el-input>
        </el-form-item>
        <el-form-item label="优惠金额" prop="discount">
          <el-input v-model="show.discount">
            <template #append>元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="最低消费" prop="min">
          <el-input v-model="show.min">
            <template #append>元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="优惠券状态">
          <el-select placeholder="请选择优惠券状态" v-model="show.status">
            <el-option label="下架" :value="0" />
            <el-option label="正常" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="有效期">
          <el-button-group>
            <el-button
              label="领券相对天数"
              :type="arr ? 'primary' : ''"
              @click="arr = !arr"
              >领券相对天数</el-button
            >
            <el-button
              label="指定绝对时间"
              :type="arr ? '' : 'primary'"
              @click="arr = !arr"
              >指定绝对时间</el-button
            >
          </el-button-group>
          <div v-if="arr" class="left">
            <el-input v-model="show.days"
              ><template #append>天</template></el-input
            >
          </div>
          <div v-if="!arr" class="rights">
            <el-config-provider :locale="locale">
            <el-form-item label="">
              <el-col :span="11">
                <el-date-picker
                  v-model="show.gmtStart"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                  @change="showss"
                />
              </el-col>
              <el-col :span="2" class="text-center">
                <span class="text-gray-500">至</span>
              </el-col>
              <el-col :span="11">
                <el-date-picker
                  v-model="show.gmtEnd"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                  @change="emtime"
                />
              </el-col>
            </el-form-item>
           </el-config-provider> 
          </div>
        </el-form-item>
        <el-form-item label="商品限制范围">
          <el-button-group v-model="types">
            <el-button
              label="全场通用"
              :type="arrs ? 'primary' : ''"
              @click="arrs = !arrs"
              >全场通用</el-button
            >
            <el-button
              label="指定分类"
              :type="arrs ? '' : 'primary'"
              @click="arrs = !arrs"
              >指定分类</el-button
            >
          </el-button-group>
        </el-form-item>
        <el-form-item label="优惠券" v-if="!arrs">
          <el-config-provider :locale="locale">
            <div class="example-block">
              <el-cascader
                :options="options"
                :props="props1"
                clearable
                v-model="show.categoryId"
              />
            </div>
          </el-config-provider>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="sure()">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 查看 -->
    <el-dialog v-model="dialogVisibles" title="查看" width="50%" >
      <el-form :model="shows" label-width="120px" disabled>
        <el-form-item label="优惠券名称">
          <el-input v-model="shows.title" />
        </el-form-item>
        <el-form-item label="优惠券类型">
          <el-select placeholder="请选择优惠券类型" v-model="shows.type">
            <el-option label="满减券" :value="1" />
            <el-option label="全部" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="介绍">
          <el-input v-model="shows.description" />
        </el-form-item>
        <el-form-item label="优惠券数量" prop="total">
          <el-input v-model="shows.total">
            <template #append>张</template>
          </el-input>
        </el-form-item>
        <el-form-item label="每人限额" prop="pass">
          <el-input v-model="shows.limit">
            <template #append>张</template>
          </el-input>
        </el-form-item>
        <el-form-item label="优惠金额" prop="discount">
          <el-input v-model="shows.discount">
            <template #append>元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="最低消费" prop="min">
          <el-input v-model="shows.min">
            <template #append>元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="优惠券状态">
          <el-select placeholder="请选择优惠券状态" v-model="shows.status">
            <el-option label="下架" :value="0" />
            <el-option label="正常" :value="1" />
            <el-option label="已过期" :value="-1" />
            <el-option label="全部" />
          </el-select>
        </el-form-item>
        <el-form-item label="有效期">
          <el-button-group>
            <el-button   :type="arr ? 'primary' : ''"  @click="arr = !arr">领券先对天数</el-button>
            <el-button   :type="arr ? '' : 'primary'"  @click="arr = !arr">指定绝对时间</el-button>
          </el-button-group>
          <div v-if="arr" class="left">
            <el-input v-model="shows.days"
              ><template #append>天</template></el-input
            >
          </div>
          <div v-if="!arr" class="rights">
            <el-form-item label="">
              <el-col :span="11">
                <el-date-picker
                  v-model="shows.gmtStart"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                />
              </el-col>
              <el-col :span="2" class="text-center">
                <span class="text-gray-500">至</span>
              </el-col>
              <el-col :span="11">
                <el-date-picker
                  v-model="shows.gmtEnd"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                />
              </el-col>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item label="商品限制范围">
          <el-button-group >
            <el-button label="全场通用" :type="arrs ? 'primary' : ''"  @click="arrs = !arrs">全场通用</el-button>
            <el-button label="指定分类" :type="arrs ? '' : 'primary'"  @click="arrs = !arrs">指定分类</el-button>  
          </el-button-group>
        </el-form-item>
        <el-form-item label="优惠券" v-if="!arrs">
          <el-config-provider :locale="locale">
            <div class="example-block" >
              <el-cascader
                :options="options"
                :props="props1"
                clearable
                v-model="shows.categoryId"
              />
            </div>
          </el-config-provider>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisibles = false">取消</el-button>
          <el-button type="primary" @click="sures()">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 分页组件 -->
    <PaginAtion
      class="dins"
      v-bind="paging"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
    </PaginAtion>
  </div>
</template>
<script>
import {utils,write}from 'xlsx'
import FileSaver from 'file-saver'
import { ElConfigProvider } from 'element-plus'
import moment from "moment";
import PaginAtion from "@/Subassembly/PaginAtion";
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import http from "@/http";
import { ElMessage} from "element-plus";
    export default {
        components: {
        PaginAtion,
        ElConfigProvider,
      },
      data() {
        return {
          locale: zhCn,
          arrs:true,
          arr: true,
          datalist: [], //存储数据
          title: "", //优惠券标题
          description: "", //优惠卷描述
          type: null, //优惠券类型
          status: null, //优惠券状态
          limit: "", //用
          timeboll:true,

          //正则
          addFormRules:{
            
                title: [{
                  required: true,
                  message: "优惠券标题不能为空",
                  trigger: "blur",
                }, ],
                type: [{
                  required: true,
                  message: "请输入类型",
                  trigger: "blur",
                }, ],
                total: [
                  {
                    required: true,
                    message: "请输入数量",
                    trigger: "blur",
                  },
                  {
                    pattern: /^[1-9]([0-9])*$/,
                    message: "请输入整数,且不能小于0",
                    trigger: "blur",
                  },
                ],
                limit: [{
                    required: true,
                    message: "请输入限领数量",
                    trigger: "blur",
                  },
                  {
                    pattern: /^[1-9]([0-9])*$/,
                    message: "请输入整数,且不能小于0",
                    trigger: "blur",
                  },
                ],
                discount: [{
                    required: true,
                    message: "请输入优惠金额",
                    trigger: "blur",
                  },
                  {
                    pattern: /^[1-9]([0-9])*$/,
                    message: "请输入整数,且不能小于0",
                    trigger: "blur",
                  },
                ],
                min: [{
                    required: true,
                    message: "请输入满减金额",
                    trigger: "blur",
                  },
                  {
                    pattern: /^[1-9]([0-9])*$/,
                    message: "请输入整数,且不能小于0",
                    trigger: "blur",
                  },
                ],
              
          },

          dialogVisible: false,
          dialogVisibles: false,
          options:[], //接收类目
          //级联组件
          props1:{
              children:"childrenList",
              label:"title",
              value:"id",
              checkStrictly:true,
              emitPath:false
          },

          //分页
          paging: {
            page: 1, //默认第一页
            limit: 10, //显示一行几页
            total: "", //总页    
          },
          //导出
            derived () {
            var wb = utils.table_to_book(document.querySelector('.el-table'))
            var wbout =write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
            try {
              FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'deriveds.xlsx')
            } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
            return wbout
            },
          //创建
          show: {
            title: "", //优惠卷标题
            type: "", //优惠卷类别，如满减
            description: "", //优惠卷描述
            total: 0, //优惠卷总数
            limit: 0, //用户限制领取
            discount: 0, //优惠价格
            min: 0, //满足优惠的最低价格
            status: "", //优惠卷状态
            categoryId: "", //优惠类别
            days: "", //优惠时长
            gmtStart: "", //优惠开始时间
            gmtEnd: "", //优惠结束时间
          },
          //查看
          shows: {
            title: "", //优惠卷标题
            type: 1, //优惠卷类别，如满减
            description: "", //优惠卷描述
            total: 1, //优惠卷总数
            limit: 1, //用户限制领取
            discount: 1, //优惠价格
            min: 1, //满足优惠的最低价格
            status: 1, //优惠卷状态
            categoryId: "", //优惠类别
            days: "", //优惠时长
            gmtStart: "", //优惠开始时间
            gmtEnd: "", //优惠结束时间
          },
        };
      },
      created() {
        this.coupons(); //优惠券
        this.category();
      },

      methods: {
        //转化时间戳
          showss(item){
              let today = new Date(item)
              let timestap = today.getTime()
              this.show.gmtStart = timestap
          },
          emtime(item){
              let today = new Date(item)
              let timestap = today.getTime()
              this.show.gmtEnd = timestap
          },
          //获取类目树
        category(){
            let leimu = {
                _gp:"admin.category",
                _mt:"categoryTree",
            }
            http.post(leimu).then((res)=>{
                console.log(res);
                this.options = res.data
            })
        },
        // 确认关闭弹出框
        sures(){
          this.dialogVisibles = false
        },
        // 获取列表数据
        coupons() {
          let data = {
            _gp: "admin.coupon",
            _mt: "list",
            title: this.title,
            type: this.type,
            status: this.status,
            pageNo: this.paging.page,
            limit: this.paging.limit,
          };
          http.post(data).then((res) => {
            console.log(res);
            if (200 == res.errno) {
              this.datalist = res.data.items;
              this.paging.total = res.data.total;
            }
          });
        },
        //当前时间是否大于结束时间
        uss(item){
            let items = new Date().getTime()
            let tst = item.status?items>item.gmtEnd?'过期':'正常':'下架'
            return tst
        },
        //正常和下架
        handleEdit(row){
            let jihuo = {
                _gp:"admin.coupon",
                _mt:"updateCouponStatus",
                id:row.id,
                status:row.status?'0':'1'
            }
            http.post(jihuo).then((res)=>{
                console.log(res);
                if(200==res.errno){
                    ElMessage.success("配置成功")
                    this.coupons()
                }
            })

        },
        //查看
        handleDelete(row){
          console.log(row);
            this.category(); //调用类目
            this.dialogVisibles = true
            console.log(row)
            Object.keys(this.shows).forEach((item)=>{
                this.shows[item] = row[item]
            })
            if(this.shows.gmtStart){
                this.arr = false
            }else{
                this.arr = true
            }
            if(this.shows.categoryId){
                this.arrs = false
            }else{
                this.arrs = true
            }
        },
        //添加
        addCoupons() {
          this.dialogVisible = true;
        },
        sure() {
          let ruis = {
            _gp: "admin.coupon",
            _mt: "create",
            title: this.show.title, //优惠卷标题
            type: this.show.type, //优惠卷类别，如满减
            description:this.show.description,
            total: this.show.total, //优惠卷总数
            limit: this.show.limit, //用户限制领取
            discount: this.show.discount, //优惠价格
            min: this.show.min, //满足优惠的最低价格
            status: this.show.status, //优惠卷状态
            categoryId:this.show.categoryId,
            days:this.show.days,
            gmtStart:this.show.gmtStart,
            gmtEnd:this.show.gmtEnd
          };
          http.post(ruis).then((res) => {
            console.log(res);
            if(200==res.errno){
                ElMessage.success("添加成功！")
                this.dialogVisible = false

                this.coupons()
                this.show = this.$options.data().show;
            }else{
                ElMessage.success("添加失败！")
            }
          });
        },
        dateFormat(row, column) {
          var date = row[column.property];
          if (date == undefined) {
            return "无";
          }
          return moment(date).format("YYYY-MM-DD-HH:SS");
        },
        birthdays(row, column) {
          var date = row[column.property];
          if (date == undefined) {
            return "无";
          }
          return moment(date).format("YYYY-MM-DD-HH:SS");
        },
        //分页
        handleSizeChange(val) {
          this.paging.limit = val;
          this.coupons();
        },
        handleCurrentChange(val) {
          this.paging.page = val;
          this.coupons();
        },
      },
    };
</script>
<style lang="less" scoped>
  .left {
    width: 100%;
    margin-top: 20px;
  }
  .rights {
    width: 100%;
    margin-top: 20px;
  }
</style>
